<template>
  <div class="fm-table-action">
    <template v-for="(item, index) in children" :key="index">
      <component :is="item" v-if="item" />
      <el-divider v-if="index != children.length - 1" direction="vertical" />
    </template>
    <el-divider v-if="moreChildren.length" direction="vertical" />
    <el-dropdown v-if="moreChildren.length" trigger="click">
      <el-button style="outline: none" icon="MoreFilled" link type="primary" />
      <template #dropdown>
        <div class="dropdown">
          <template v-for="(item, index) in moreChildren" :key="index">
            <div class="mydropdownitem" style="width: 100%; display: flex; justify-content: center">
              <component :is="item" />
            </div>
          </template>
        </div>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup>

const slots = useSlots();
const props = defineProps({
	showNum: {
		type: Number,
		default: 2,
	},
});
// 时间戳timestamp


const filterSlots = ref([]);
// 过滤掉没有name的组件
filterSlots.value = slots.default().filter((item) => typeof item.type !== 'symbol');

// 有多少个子组件
const children = computed(() => {
	return filterSlots.value.slice(0, props.showNum);
});

// 超出部分显示下拉菜单
const moreChildren = computed(() => {
	const data = filterSlots.value.slice(props.showNum);
	return data;
});

onBeforeUpdate(() => {
	filterSlots.value = slots.default().filter((item) => typeof item.type !== 'symbol');
});

</script>

<style lang="scss" scoped>
.fm-table-action {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.dropdown {
  padding: 10px;
}
.mydropdownitem {
  margin-bottom: 8px;
  &:last-child {
    margin-bottom: 0px;
  }
}
</style>
